<script src="/js/validateIsMain.js"></script>
<section class="py-5 wrapper wrapper-content" id="subContainer">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-sm-5">
                    <div class="row row-sm text-center">
                        <div class="col-xs-6">
                            <div class="panel padder-v item">
                                <div class="h1 text-info font-thin h1">{{total.projectNum}}</div>
                                <span class="text-muted text-xs">项目总数</span>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item bg-info">
                                <div class="h1 text-fff font-thin h1">{{total.surveyNum}}</div>
                                <span class="text-muted text-xs">问卷总数</span>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item bg-primary" style="cursor: auto">
                                <div class="h1 text-fff font-thin h1">{{total.collectNum}}</div>
                                <span class="text-muted text-xs">已收集数</span>
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="panel padder-v item" style="cursor: auto">
                                <div class="font-thin h1">{{total.targetCollectNum}}</div>
                                <span class="text-muted text-xs">共需收集</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7" style="padding-right:0; padding-left: 0;">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" style="padding-right:0;">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content" style="border-top:none;">
                            <div class="echarts" id="echarts-line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12" v-if="resultDev">
            <div class="row">
                <div class="col-sm-12">
                    <div class="row row-sm text-center">
                        <div class="ibox-title">
                            <h5>考核申请</h5>
                        </div>
                        <div class="col-xs-3" v-on:click="jumpTo('pages/workshift/exam.html')">
                            <div class="panel padder-v item">
                                <div class="h1 text-info font-thin h1">{{total.workrecordNum ? total.workrecordNum : 0}}</div>
                                <span class="text-muted text-xs">班次申请</span>
                            </div>
                        </div>
                        <!--                        <div class="col-xs-3" v-on:click="jumpTo('pages/survey/exam.html')">-->
                        <!--                            <div class="panel padder-v item bg-info">-->
                        <!--                                <div class="h1 text-fff font-thin h1">{{total.signNum}}</div>-->
                        <!--                                <span class="text-muted text-xs">问卷申请</span>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <div class="col-xs-3" v-on:click="jumpTo('pages/exam/exam.html')">
                            <div class="panel padder-v item bg-primary" style="cursor: auto">
                                <div class="h1 text-fff font-thin h1">{{total.deliveryNum ? total.deliveryNum : 0}}</div>
                                <span class="text-muted text-xs">考核申请</span>
                            </div>
                        </div>

                        <div class="col-xs-3" v-on:click="seatTotalClickHandler()"
                             v-if="hasAnyRole('ROLE_ADMIN', 'ROLE_FINALCUS')">
                            <div class="panel padder-v item bg-primary" style="cursor: auto">
                                <div class="h1 text-fff font-thin h1" style="cursor: pointer;">{{total.seatTodalNum ? total.seatTodalNum : 0}}
                                </div>
                                <span class="text-muted text-xs">坐席今日收集情况</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="seatTotalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="seatTotalModalLabel">坐席今日收集详情</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>坐席</th>
                                <th>收集数量</th>
                                <th>有效数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in seatCollect">
                                <th scope="row">{{index + 1}}</th>
                                <td><span>{{item.seat}}</span></td>
                                <td><span class="click-span" @click="listDetails(item, false)">{{item.num}}</span></td>
                                <td><span class="click-span" @click="listDetails(item, true)">{{item.valid_num}}</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>

        <div class="modal fade" id="seatTotalDetalsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" style="width: 1200px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="seatTotalDetalsModalLabel">坐席收集详情</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>坐席</th>
                                <th>工号</th>
                                <th>收集时间</th>
                                <th>电话号码</th>
                                <th>通话时长</th>
                                <th>录音</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in seatSelectedDetals">
                                <th scope="row">{{index + 1}}</th>
                                <td><span>{{item.seat}}</span></td>
                                <td><span>{{item.workNum}}</span></td>
                                <td><span>{{item.createdAt}}</span></td>
                                <td><span>{{item.creator}}</span></td>
                                <td><span>{{item.callLastsTime}}</span></td>
                                <td>
                                    <audio controls v-if="item.record">
                                        <source :src="config.recordUrl + item.record + '&showname=11'" type="audio/mpeg">
                                        您的浏览器不支持 audio 元素。
                                    </audio>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <pageination :total="detailsPageInfo.total" :size="detailsPageInfo.size" :page="detailsPageInfo.pageNum"
                                     :changge="pageFn"></pageination>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>
</section>
<!--<script src="/attendance/js/validateIsMain.js"></script>-->
<script>

    var vue = new Vue({
        el: '#subContainer',
        data: {
            applicationContextRootPath: '/',
            config: JSON.parse(sessionStorage.getItem("surveyConfig")),
            currentYear: new Date().getFullYear(),
            lineEchart: null,
            pieChart: null,
            pageInfo: {
                name: '',
                pageNum: 1,
                total: 0,//总页数
                size: 10//每页显示条目个数不传默认10
            },
            total: {
                projectNum: 0,
                surveyNum: 0,
                collectNum: 0,
                workrecordNum: 0,
                signNum: 0,
                deliveryNum: 0,
                targetCollectNum: 0
            },
            collectings: [],
            items: [{}],
            lineChartData: {
                surveyData: [],
                collectDatas: []
            },
            pieChartData: {
                sms: 0,
                phone: 0,
                interview: 0
            },
            master: [],//接受权限数组
            result: false,//表示超级管理员权限
            resultDev: false,//表示操作人员权限
            seatCollect: [],
            selectedSeat: null,
            seatSelectedDetals: [],
            detailsPageInfo: {
                isValid: false,
                pageNum: 1,
                total: 0,//总页数
                size: 10//每页显示条目个数不传默认10
            }
        },
        created: function () {
            // this.loginMaster();
            // this.loadTotal();
            // this.collecting();
            // this.lineChart();
        },
        mounted: function () {
            this.renderEchart();
            this.renderEchartPie();
        },
        methods: {
            pageFn: function (val) {
                if(this.selectedSeat) {

                    this.detailsPageInfo.pageNum = val;
                    this.listDetails(this.selectedSeat, this.detailsPageInfo.isValid);
                }
            },
            listDetails(item, valid) {
                this.selectedSeat = item;
                let that = this;
                this.detailsPageInfo.createdAtStr = this.dateToStr(new Date());
                this.detailsPageInfo.seat = item.seat;
                if(valid) {
                    this.detailsPageInfo.isValid = 'YES';
                }
                AJAX.GET('zsAnswer', this.detailsPageInfo, function (resp) {
                    that.seatSelectedDetals = resp.data.list;
                    that.detailsPageInfo.pageNum = resp.data.pageNum;
                    that.detailsPageInfo.total = resp.data.total;
                });
                $("#seatTotalDetalsModal").modal('show');
            },
            seatTotalClickHandler() {
                let that = this;
                let params = {};
                params.startTime = this.dateToStr(new Date());
                AJAX.GET('zsAnswer/seatTotal', params, function (resp) {
                    that.seatCollect = resp.data;
                    $("#seatTotalModal").modal('show');
                });
            },
            nextYear() {
                this.currentYear++;
                this.loadTotal();
            },
            preYear() {
                this.currentYear--;
                this.loadTotal();
            },
            loginMaster() {
                var that = this;
                this.master = sessionStorage.getItem('master');
                var masterJ = JSON.parse(this.master);
                masterJ.forEach(e => {
                    var authority = e.authority;
                    if (authority === 'ROLE_ADMIN') {
                        that.result = true;
                        that.resultDev = true;
                    }
                })
            },
            loadPieChart() {
                var that = this;
                AJAX.GET('home/pieChart', {year: this.currentYear}, function (resp) {
                    var result = resp.data;
                    if (!result || result.length == 0) {
                        that.pieChartData.sms = 0;
                        that.pieChartData.phone = 0;
                        that.pieChartData.interview = 0;
                    }
                    result.forEach(function (item) {
                        if (item.collectType === 0) {
                            that.pieChartData.sms = item.collectNum;
                        }
                        if (item.collectType === 1) {
                            that.pieChartData.phone = item.collectNum;
                        }
                        if (item.collectType === 2) {
                            that.pieChartData.interview = item.collectNum;
                        }
                    })
                    that.renderEchartPie();
                });
            },
            renderEchartPie() {
                this.pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                var pieoption = {
                    title: {
                        text: '收集数据来源',
                        subtext: '各收集方式获得有效问卷分布',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: ['短信', '电话', '走访']
                    },
                    calculable: true,
                    series: [
                        {
                            name: '收集方式',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [
                                {value: this.pieChartData.phone, name: '电话'},
                                {value: this.pieChartData.sms, name: '短信'},
                                {value: this.pieChartData.interview, name: '走访'}
                            ]
                        }
                    ]
                };
                this.pieChart.setOption(pieoption);
                $(window).resize(this.pieChart.resize);
            },
            renderEchart() {
                this.lineEchart = echarts.init(document.getElementById("echarts-line-chart"));

                var lineoption = {
                    title: {
                        text: '最近15天发出与收集情况'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params, ticket, callback) {
                            console.log(params, ticket, callback);
                            var result = '';
                            var title = '';
                            title = params[0].name.substr(0, 2) + '月' + params[0].name.substr(2, 2) + '日';
                            console.log(title)
                            result += '<span>' + title + '</span>';
                            result += '<br/>'
                            params.forEach(function (item) {

                                result += '<span>' + item[0] + ': ' + item.value + '</span><br/>';


                            });
                            return result;

                        }
                    },
                    legend: {
                        data: ['发出问卷数量', '收到问卷回复']
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: this.jsonToTitle(),
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} 份'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '发出问卷数量',
                            type: 'line',
                            symbolSize: 1,
                            smooth: true,
                            data: this.jsonToChartData(this.lineChartData.surveyData),
                        },
                        {
                            name: '收到问卷回复',
                            type: 'line',
                            symbolSize: 1,
                            smooth: true,
                            data: this.jsonToChartData(this.lineChartData.collectDatas),
                        }
                    ]
                };
                this.lineEchart.setOption(lineoption);
            },
            jsonToChartData(jsons) {
                var result = [];
                jsons.forEach(function (item, index) {
                    result.push(item.VALUE);
                });
                return result;
            },
            jsonToTitle() {
                var result = [];
                this.lineChartData.surveyData.forEach(function (item, index) {
                    result.push(item.xkey);
                });
                return result;
            },
            lineChart() {
                var that = this;
                AJAX.GET('home/lineChart', {}, function (resp) {
                    var result = resp.data;
                    that.lineChartData.surveyData = result.surveyData;
                    that.lineChartData.collectDatas = result.collectDatas;
                    that.renderEchart();
                })
            },
            euroFormatter(v, axis) {
                return "&yen;" + v.toFixed(axis.tickDecimals);
            },
            loadTotal() {
                this.pieChartData = {
                    sms: 0,
                    phone: 0,
                    interview: 0
                };
                var that = this;
                AJAX.GET('home/total', {year: this.currentYear}, function (resp) {
                    that.total = resp.data;
                    if (!that.total.targetCollectNum) {
                        that.total.targetCollectNum = 0;
                    }
                    if(that.total.sms) {
                        that.pieChartData.sms = that.total.sms;
                    }
                    if(that.total.phone) {
                        that.pieChartData.phone = that.total.phone;
                    }
                    if(that.total.interview) {
                        that.pieChartData.interview = that.total.interview;
                    }
                    if(that.total.sms || that.total.phone || that.total.interview) {
                        that.renderEchartPie();
                    } else {
                        that.loadPieChart();
                    }
                })
            },
            collecting() {
                var that = this;
                AJAX.GET('home/collecting', {}, function (resp) {
                    that.collectings = resp.data;
                });
            },
            jumpTo(url, param) {
                toPage(url, param);
            }
        }
    })
</script>
